<template>
  <div class="container">
    <div class="formSearchZone">
      <el-row>
        <el-form ref="bookingFormRef" :model="bookingForm" :inline="true" label-width="auto" style="min-width: 100%">
          <el-row>
            <el-form-item label="姓名" prop="name">
              <el-input placeholder="请输入姓名" v-model="bookingForm.name" />
            </el-form-item>
            <el-form-item label="联系号码" prop="phoneNumber">
              <el-input placeholder="请输入联系号码" v-model="bookingForm.phoneNumber" />
            </el-form-item>
            <el-form-item label="预约状态" prop="queueStatus">
              <el-select
                  v-model="bookingForm.queueStatus"
                  placeholder="请选择预约状态"
                  size="default"
                  style="width: 240px"
                  clearable
              >
                <el-option
                    v-for="dict in booking_queue_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select
                  v-model="bookingForm.gender"
                  placeholder="请选择性别"
                  size="default"
                  style="width: 240px"
                  clearable
              >
                <el-option
                    v-for="dict in shiqian_gender"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="起始时间">
              <el-date-picker
                  style="width: 196px"
                  v-model="bookingForm.startTime"
                  type="datetime"
                  placeholder="选择时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :default-time="defaultStartTime"
              />
            </el-form-item>

            <el-form-item label="终止时间">
              <el-date-picker
                  style="width: 196px"
                  v-model="bookingForm.endTime"
                  type="datetime"
                  placeholder="选择时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :default-time="defaultEndTime"
              />
            </el-form-item>
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
            <el-button icon="Refresh" @click="resetForm">重置</el-button>
          </el-row>
        </el-form>
      </el-row>
    </div>

    <div class="formDataZone">
      <el-row style="margin: 0 0 10px 0">
        <el-button type="warning" plain icon="Download" @click="exportTableData">导出</el-button>
      </el-row>
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="gender" label="性别" align="center">
          <template #default="scope">
            <dict-tag :options="shiqian_gender" :value="scope.row.gender"/>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" align="center" />
        <el-table-column prop="phoneNumber" label="联系电话" align="center" />
        <el-table-column prop="appointmentTime" label="来诊时间" align="center" />
        <el-table-column prop="message" label="留言" show-overflow-tooltip align="center"/>
        <el-table-column prop="queueStatus" label="预约状态" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.queueStatus === '0' ? 'primary' : scope.row.queueStatus === '1' ? 'warning' : 'success'">
              <dict-tag :options="booking_queue_status" :value="scope.row.queueStatus"/>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-dropdown trigger="click" size="large">
              <div style="display: flex; align-items: center;">
                <el-button size="small">
                  <el-icon style="display: flex; align-items: end;"><ArrowDown /></el-icon>
                </el-button>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="changeQueueStatus(scope.row,dict.value)" v-for="dict in booking_queue_status">{{ dict.label }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-row justify="end">
        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="bookingForm.page"
            v-model:limit="bookingForm.pageSize"
            @pagination="search"
        />
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { bookingGetInfoService,bookingExportExcelService,bookingChangeQueueStatusService } from '@/api/shiqian/booking.js'
import DictTag from "@/components/DictTag/index.vue";
import {now} from "@vueuse/core";
const { proxy } = getCurrentInstance();
const { booking_queue_status,shiqian_gender } = proxy.useDict("booking_queue_status","shiqian_gender");

// 加载标识
const loading = ref(false);
// 预约表单标识
const bookingFormRef = ref();

// 预约表单
const defaultStartTime = new Date(2000, 1, 1, 0, 0, 0);
const defaultEndTime = new Date(2000, 1, 1, 23, 59, 59);
const bookingForm = ref({
  name: '',
  gender: '',
  phoneNumber: '',
  queueStatus: '',
  startTime: getStartOfDay(),
  endTime: getEndOfDay(),
  page: 1,
  pageSize: 10
})
const total = ref(0);//总记录数

//预约表格数据
const tableData = ref([]);

// 重置表单
const resetForm = () => {
  bookingFormRef.value.resetFields();
  //重置日期选择框
  bookingForm.value.startTime = getStartOfDay();
  bookingForm.value.endTime = getEndOfDay();
}

// 查询数据
const search = async () => {
  console.log("起始时间====>",bookingForm.value.startTime);
  console.log("终止时间====>",bookingForm.value.endTime);

  loading.value = true;
  const res = await bookingGetInfoService(bookingForm.value);
  loading.value = false;
  console.log("查询的数据为====>",res);
  if (res.code === 200){
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
}

// 更改预约状态
const changeQueueStatus = async (row,queueStatus) => {
  let params = {
    bookingId: row.bookingId,
    queueStatus: queueStatus
  }
  const res = await bookingChangeQueueStatusService(params);
  if (res.code === 200){
    search();
  }
  console.log("更改预约状态Res===>",res);
}

// 获取今日0时0分0秒的时间
function getStartOfDay() {
  const now = new Date();
  const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);

  const year = startOfDay.getFullYear();
  const month = String(startOfDay.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并确保两位数
  const day = String(startOfDay.getDate()).padStart(2, '0');
  const hours = String(startOfDay.getHours()).padStart(2, '0');
  const minutes = String(startOfDay.getMinutes()).padStart(2, '0');
  const seconds = String(startOfDay.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 获取今日23时59分59秒的时间
function getEndOfDay() {
  const now = new Date();
  const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);

  const year = endOfDay.getFullYear();
  const month = String(endOfDay.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1，并确保两位数
  const day = String(endOfDay.getDate()).padStart(2, '0');
  const hours = String(endOfDay.getHours()).padStart(2, '0');
  const minutes = String(endOfDay.getMinutes()).padStart(2, '0');
  const seconds = String(endOfDay.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

/** 导出按钮操作 */
function exportTableData() {
  proxy.download("/bookings/export", {
    ...bookingForm.value,
  }, `预约信息表_${new Date().getTime()}.xlsx`);
}

search();
</script>

<style lang='scss' scoped>
.container{
  .formSearchZone{
    margin: 20px 20px 0 20px;
  }

  .formDataZone{
    padding: 0 20px 0 20px;
    // 去除dropdown下拉菜单组件在鼠标悬浮时出现的黑边框
    :deep(.el-tooltip__trigger:focus-visible) {
      outline: unset;
    }
  }
}
</style>
